<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts';

import { onMounted, ref, watch } from 'vue';

import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

// 导入echarts以解决全局变量问题
import * as echarts from 'echarts';

interface VehicleCostData {
  licensePlate: string;
  totalCost: number;
  maintenanceCost: number;
  estimatedFuelCost: number;
}

const props = defineProps<{
  data: VehicleCostData[];
}>();

const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);

// 监听数据变化，重新渲染图表
watch(
  () => props.data,
  () => {
    renderChart();
  },
  { deep: true },
);

const renderChart = () => {
  if (!props.data || props.data.length === 0) return;

  const licensePlates = props.data.map((item) => item.licensePlate);
  const totalCosts = props.data.map((item) => item.totalCost);
  const maintenanceCosts = props.data.map((item) => item.maintenanceCost);
  const fuelCosts = props.data.map((item) => item.estimatedFuelCost);

  renderEcharts({
    title: {
      text: '单车成本对比',
      left: 'center',
      top: '5%',
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#333',
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      formatter: (params: any) => {
        const data = params[0];
        const vehicleData = props.data.find(
          (item) => item.licensePlate === data.name,
        );

        if (!vehicleData) return '';

        return `
          <div style="padding: 8px;">
            <div style="font-weight: bold; margin-bottom: 4px;">${data.name}</div>
            <div>总成本: <span style="color: #5ab1ef;">¥${data.value.toLocaleString()}</span></div>
            <div>维保成本: <span style="color: #019680;">¥${vehicleData.maintenanceCost.toLocaleString()}</span></div>
            <div>燃油成本: <span style="color: #f9c74f;">¥${vehicleData.estimatedFuelCost.toLocaleString()}</span></div>
          </div>
        `;
      },
    },
    legend: {
      data: ['总成本', '维保成本', '燃油成本'],
      top: '15%',
      left: 'center',
      textStyle: {
        color: '#666',
      },
    },
    grid: {
      bottom: 60,
      left: 80,
      right: 20,
      top: 80,
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: licensePlates,
      axisLabel: {
        interval: 0,
        rotate: 45,
        fontSize: 12,
      },
    },
    yAxis: {
      type: 'value',
      name: '成本 (元)',
      axisLabel: {
        formatter: '{value} 元',
      },
    },
    series: [
      {
        name: '燃油成本',
        type: 'bar',
        stack: 'total',
        data: fuelCosts,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#f9c74f' },
            { offset: 1, color: '#f8961e' },
          ]),
        },
        label: {
          show: true,
          position: 'inside',
          formatter: '{c} 元',
          fontSize: 10,
        },
      },
      {
        name: '维保成本',
        type: 'bar',
        stack: 'total',
        data: maintenanceCosts,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#5ab1ef' },
            { offset: 1, color: '#019680' },
          ]),
        },
        label: {
          show: true,
          position: 'inside',
          formatter: '{c} 元',
          fontSize: 10,
        },
      },
      {
        name: '总成本',
        type: 'bar',
        data: totalCosts,
        itemStyle: {
          color: 'transparent',
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{c} 元',
          fontSize: 11,
          fontWeight: 'bold',
        },
      },
    ],
    animation: true,
  });
};

onMounted(() => {
  renderChart();
});
</script>

<template>
  <div class="h-full w-full">
    <EchartsUI ref="chartRef" />
  </div>
</template>

<style scoped>
/* 图表容器样式 */
.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}
</style>
